<script setup lang="ts">
import { ref,onMounted,watch } from "vue";
import Searchbox from "@/views/components/searchbox/Searchbox.vue";
import MqttComponent from "@/views/configs/productConfig/component/mqtt.vue";
import AttributeComponent from "@/views/configs/productConfig/component/attribute.vue";
import PerformanceComponent from "@/views/configs/productConfig/component/performance.vue";
import { getProductOptionsApi } from "@/api/products/product";
import { useRoute } from "vue-router";

const RouteName="product-config"
defineOptions({
  name: RouteName,
});

const productOptions = ref([]);
onMounted(async () => {
  const productOptionsRes = await getProductOptionsApi()
  if(productOptionsRes.code == 0){
    productOptions.value = [
      ...productOptionsRes.data.options.map(option => ({
        val: Number(option.val),
        label: option.label
      }))
    ];
  }
})

const selected = ref(0);

function tabClick({ index }) {
  selected.value = index;
}
const route =  useRoute()
const listComponents = [
  {
    key: "performance",
    title: "性能指标",
    component: PerformanceComponent
  },
];


const searchFields = ref(  [
  { prop: "productId",
    name: "所属产品",
    type: "select",
    formOptions:productOptions,
    clearable:false,
  },
])
const searchForm = ref({
  productId: route.query.productId ? Number(route.query.productId) : 0
})
const handleSearch = (e:any) => {
  console.log(e)
  if(e.productId){
    searchForm.value.productId = e.productId;
  }else {
    searchForm.value.productId = 0
  }
}

const handleReset = (e:any) => {
  searchForm.value.productId = 0
}

const productId = ref(route.query.productId ? Number(route.query.productId) : 0);
watch(() => route.query.productId, (newVal) => {
  console.log(route.query.productId)
  if(route.name==RouteName && newVal){
    productId.value = newVal ? Number(newVal) : 0;
    searchForm.value.productId = productId.value;
  }

}, { immediate: true });
</script>

<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <Searchbox
          :fields= searchFields
          :maxVisibleFields=3
          :initialValues="searchForm"
          @change="handleSearch"
          @search="handleSearch"
          @reset="handleReset"
        />
      </div>
    </template>

    <el-tabs @tab-click="tabClick" >
      <template v-for="(item, index) of listComponents" :key="item.key">
        <el-tab-pane :lazy="true">
          <template #label>
            <span
              v-tippy="{
                maxWidth: 'none',
                content: `${item.title}`
              }"
            >
              {{ item.title }}
            </span>
          </template>
          <keep-alive>
            <component :is="item.component"
                       :key="item.key"
                       v-show="selected == index"
                       :productId="searchForm.productId"/>
          </keep-alive>
        </el-tab-pane>
      </template>
    </el-tabs>

  </el-card>
</template>

<style scoped lang="scss">

</style>





